<template>
	<view>
		<u-navbar title-color="#fff" :borderBottom="false" titleColor="#000000" backIconSize="40" back-icon-color="#ffffff"
		 :background="background">
			<u-search v-model="keyword" height="56" :action-style="{color: '#fff'}"></u-search>
		</u-navbar>
		<view class="top">

		</view>
		<view class="content">
			<u-sticky bgColor="transparent">
				<view class="tabs">
					<u-tabs :list="list1" height="108" bgColor="transparent" fontSize="32" @change="change" :bold="true" :current="current"
					 activeColor="#FFC044"></u-tabs>
				</view>
			</u-sticky>
			<view class="down">
				<view class="list" @click="toPage('details')" v-for="(item,index) in list1" :key="index">
					<image src="../static/a0.png" class="head"></image>
					<view class="goods">
						<view class="name omit2">
							果吸吸潮流饮品 今夏最热门饮料500 ml装 新鲜送水果原材料
						</view>
						<view class="number">
							月销10006
						</view>
						<view class="downx">
							<view class="left">
								¥ <text> 45</text>
							</view>
							<view class="right">
								分享赚 <text>20</text>钻
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': '#1D1916'
				},
				list1: [{
					name: '鞋履专区'
				}, {
					name: '男女箱包'
				}, {
					name: '数码家电'
				}, {
					name: '家居建材'
				}, {
					name: '化妆品'
				}, {
					name: '益智玩具'
				}],
				current: 0,
				keyword: ""
			}
		},
		onLoad(option) {
			than = this;
		},
		methods: {
			change(index) {
				than.current = index;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				const query = uni.createSelectorQuery().in(this);
				query.select('#a' + index).boundingClientRect(data => {
					uni.pageScrollTo({
						scrollTop: data.top - 100,
						duration: 300
					});

				}).exec();
			},
		},
	}
</script>

<style lang="less">
	.content {
		margin-top: -100rpx;

		.tabs {
			border-radius: 70rpx 0px 0px 0px;
			background: #FFFFFF;
			padding-left: 36rpx;
			height: 108rpx;
		}

		.down {
			padding: 0 36rpx;

			.list {
				height: 265rpx;
				display: flex;
				align-items: center;

				.head {
					width: 200rpx;
					height: 200rpx;
				}

				.goods {
					margin-left: 23rpx;
					width: 450rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #222222;
					}

					.number {margin: 10rpx 0;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}

					.downx {
						display: flex;
						align-items: center;
						width: 100%;
						.left {
							font-size: 31rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #F96F21;

							text {
								font-size: 41rpx;
							}
						}

						.right {
							margin-left: auto;
							height: 50rpx;
							background: #E1C9AF;
							border-radius: 25rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #1D1916;
							padding: 0 17rpx;
							line-height: 50rpx;
							text {
								font-size: 40rpx;
							}
						}
					}
				}

			}
		}
	}

	.top {
		background: #1D1916;
		padding-top: 100rpx;
		color: #E1C9AF;
		height: 200rpx;
		margin-top: -100rpx;

		.down {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 150rpx;
			position: relative;

			.long {
				width: 2rpx;
				height: 120rpx;
				background: rgba(99, 93, 88, 0.8);
			}

			.list {
				width: 50%;
				text-align: center;

				.name {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;

					image {
						margin-left: 16rpx;
						width: 31rpx;
						height: 31rpx;
					}
				}

				.number {
					font-size: 80rpx;
					font-weight: bold;
					font-style: italic;
					color: #E1C9AF;
				}
			}
		}

		.up {
			padding: 0 38rpx;
			height: 180rpx;
			display: flex;
			align-items: center;

			.name {
				font-size: 56rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.icon {
				margin-left: auto;
				display: flex;
				align-items: center;

				.list {
					text-align: center;
					margin-left: 35rpx;

					image {
						width: 64rpx;
						height: 64rpx;
					}

					.name {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
